<template>
  <div class="userInfo">
    <div class="user">
      <div>用户ID: {{userId}}</div>
      <!-- <div>用户ID: {{user}}</div> -->
      <div class="userStatus">
        <span>状态:</span>
        <span>{{status}}</span>
      </div>
    </div>
    <!-- 机构信息 -->
    <div class="orgInfo firstPad">
      <h3>机构信息</h3>
      <div class="orgDetail">
        <div class="orgBrief">
          <p>机构简称</p>
          <input type="text" v-model="comShortName">
        </div>
        <div class="orgBrief">
          <p>机构全称</p>
          <input type="text" v-model="comAbsName">
        </div>
      </div>
    </div>
    <div class="orgInfo">
      <h3>联系人信息</h3>
      <div class="orgDetail">
        <div class="orgBrief">
          <p>姓名</p>
          <input class="iptBg" type="text" v-model="realName">
        </div>
        <div class="orgBrief">
          <p>寄样地址</p>
          <input type="text" v-model="address">
        </div>
        <div class="orgBrief">
          <p>手机号</p>
          <input class="iptBg" type="text" v-model="mobile">
        </div>
        <div class="orgBrief">
          <p>邮箱</p>
          <input type="text" v-model="email">
        </div>
      </div>
    </div>
    <div class="orgInfo">   
      <h3>收款信息</h3>
      <div class="orgDetail">
        <div class="orgBrief">
          <p>账户名称</p>
          <input type="text" v-model="bankName">
        </div>
        <div class="orgBrief">
          <p>银行卡号</p>
          <input type="text" v-model="bankNo">
        </div>
        <div class="orgBrief">
          <p></p>
          <div class="left">
            <button class="commit" type="button" @click="submit">提交修改</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
    await store.commit('setUserIndex',0)
  },
  layout: 'internalouts',
  components: {
    
  },
  data() {
    return {
      index: 0, // 当前选择的页面
      userInfo:{},//用户基本信息
      flag:false,
      address:'', // 地址
      bankName:'', //银行卡名称
      bankNo:'', //银行卡
      comAbsName:'', //机构全称
      comShortName:'', // 机构简称
      email:'', // 邮箱
      mobile:'', // 手机
      realName:'', // 真实姓名
      reason:'', // 原因
      status:'', // 状态
      userId:'', // 用户ID
      test:'',//只弹出一次
    }
  },
  computed:{
    // user(){ //用户ID 
    //   return this.$store.state.user
    // }
  },
  methods: {
    submit(){//提交修改
      let params = {
        address: this.address,
        bankName:this.bankName,
        bankNo: this.bankNo,
        comAbsName: this.comAbsName,
        comShortName: this.comShortName,
        email: this.email,
        mobile:this.mobile,
        realName: this.realName,
      };
      this.flag = true
      this.$axios.$post('saveAuthInfo',params).then(res => {
        if(res.status === 200){
          if(this.test){
            this.test.close();
          }
          this.test = this.$message({
            message:res.msg,  
            type:'success',
            duration:1000,
          })
          // this.$router.push('/goodsDetail')
          this.authInfo(); //保存成功后调用一下初始化的接口
        }else{
          if(this.test){
            this.test.close();
          }
          this.test = this.$message({
            message:res.msg,  
            type:'warning',
            duration:1000,
          })
          // this.authInfo();//保存成功后，调用一下初始化的接口
        }
      })
      .catch(error => {
        this.$message({
          message:'请求失败',  
          type:'warning'
				})
      })
    },
    authInfo(){ //账户管理
      let _this = this;
      this.$axios.$post('authInfo').then(res => {
        if(res.status === 200){
          _this.address = res.obj.address; // 地址
          _this.bankName = res.obj.bankName; //银行卡名称
          _this.bankNo = res.obj.bankNo; //银行卡
          _this.comAbsName = res.obj.comAbsName; //机构全称
          _this.comShortName = res.obj.comShortName; // 机构简称
          _this.email = res.obj.email; // 邮箱
          _this.mobile = res.obj.mobile; // 手机
          _this.realName = res.obj.realName; // 真实姓名
          _this.reason = res.obj.reason; // 原因
          _this.status = res.obj.status; // 状态
          _this.userId = res.obj.userId; // 用户ID
        }else{
          this.$message({
            message:res.msg,  
            type:'warning'
          })
         }
      })
      .catch(err => {
        	this.$message({
            message:'请求失败',  
            type:'warning'
          })
      })
    }
  },
  mounted(){
    this.authInfo() //账户管理
  },
  watch:{
    bankNo(newValue){
     this.bankNo = String(newValue).replace(/\D/g,'')
    }
  },
}
</script>

<style scoped>
.ii-wrap {
  width: 1200px;
  margin: 22px auto 22px auto;
  display: flex;
  justify-content: space-between;
}
.ii-wrap-left {
  background: #fff;
  width: 220px;
  border-radius: 4px;
}
.li-wrap-right {
  width: 960px;
}
.ii-wrap-left-one {
  height: 50px;
  border-bottom: 1px solid #f4f4f4;
  line-height: 50px;
  padding-left: 30px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.ii-wrap-left-item {
  border-bottom: 1px solid #f4f4f4;
  padding-bottom: 20px;
  user-select: none;
}
.ii-wrap-left-item p {
  cursor: pointer;
}
.ii-wrap-left-item .p1 {
  font-size: 14px;
  color: #333;
  position: relative;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;

}
.ii-wrap-left-item .p2 {
  font-size: 14px;
  color: #666;
  padding-left: 30px;
}
.ii-wrap-left-item .p3 {
  margin-top: 20px;
}
.ii-wrap-left-last {
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  position: relative;
}
.ii-line-active::before {
  content: '';
  width: 3px;
  height: 26px;
  background: #0096e6;
  position: absolute;
  left: 0;
  top: 12px;
}
.ii-text-active {
  color: #0096e6 !important;
}
/* 用户管理 */
.userInfo{
  width:900px;
  padding:50px 0 50px 110px;
  background: #fff;
  font-size: 14px;
  margin:20px auto;
  box-sizing:border-box;
}
.orgInfo{
  padding-top:58px;
}
.userInfo>div.firstPad{
  padding-top:50px;
}
.orgInfo h3{
  color:#333333;
  font-size: 14px;
  padding-bottom:24px;
  margin:0;
}
.userInfo .user{
  width: 316px;
  display:flex;
  justify-content: space-between;
  font-size: 18px;
  color:#333333;
}
.userStatus{
  font-size: 14px;
}
.userStatus>span:nth-child(2){
  color:#67b3ec;
}
.orgBrief{
  width: 400px;
  display: flex;
  justify-content: space-between;
  color:#7a7a7a;
  padding:0 0 14px 20px;
}
.orgBrief p{
  height:30px;
  line-height:30px;
  width:56px;
  text-align:right;
}
.orgBrief>input[type="text"]{
  width: 325px;
  height:30px;
  border:1px solid #ebebeb;
  box-sizing:border-box;
  color:#333333;
  border-radius:5px;
  text-indent: 12px;
}
.orgBrief>input[type="text"]:focus{
  border:1px solid #0096e6;
}
.orgBrief>input.iptBg{
  color:#a6a6a6;
  background-color:#f4f4f4;
}
.orgBrief>.left{
  width: 300px;
  height:30px;
  display:flex;
  justify-content: flex-start;
  margin-top:22px;
}
.orgBrief button{
  font-size: 14px;
  font-weight:bold;
  color:#ffffff;
  background:#0096e6;
  border-radius:15px;
  padding:7px 22px 22px 22px;
  box-sizing: content-box;
  outline: none;
  border: none;
  cursor: pointer;
}
.orgBrief button:hover{
  background:#66B1FF;
}
.orgBrief .active{
  color:#ffffff;
  background:#0096e6;
}
</style>
